<template>
  <div ref="rightPanel" class="rightBtn" @click="onClick">
    <i class="el-icon-setting"/>
    <Drawer ref="drawer" @callBack="onCallBack"/>
  </div>
</template>

<script>
import Drawer from '@/components/RightBtn/Drawer'

export default {
  components: { Drawer },
  mounted() {
    const elx = this.$refs.rightPanel
    const body = document.querySelector('body')
    body.insertBefore(elx, body.firstChild)
  },
  methods: {
    onClick() {
      this.$refs['drawer'].onShow()
    },
    onCallBack() {
      if (this.$router.currentRoute.path === '/dashboard') {
        location.reload()
      } else {
        this.$router.push({ path: `/dashboard` })
      }
    }
  }
}
</script>

<style scoped>
.rightBtn {
  width: 48px;
  height: 48px;
  position: fixed;
  top: calc(50% - 48px);
  right: 10px;
  color: #ffffff;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 6px 0 0 6px !important;
  background-color: rgb(24, 144, 255);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
  line-height: 48px;
  z-index: 1;
}

i {
  font-size: 24px;
  line-height: 48px;
}
</style>
